<template>
  <vue-modal
    @submitData="saveTag"
    modalTitle="保存标签信息"
    modalName="saveTagModal"
    modalWidth="750"
    ref="saveTagModal">
    <div slot="content" class="form-box">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="message-box">
          <h3 class="name-title">标签名称</h3>
          <span :class="showNameTip? 'name-tip showTip': 'name-tip'">长度不超过20个字符</span>
          <p class="name-star">*</p>
        </div>
        <el-input
          v-model="form.name"
          class="input-name"
          size="small"
          maxlength="20"
          @focus="focusInputName"
          @blur="blurInputName"></el-input>
        <div class="message-box">
          <h3 class="category-title">所属分类</h3>
          <p class="category-star">*</p>
        </div>
        <el-select v-model="form.categoryId" placeholder="请选择所属分类" class="select-category" size="small">
          <el-option
            v-for="item in categoryData"
            :key="item.id"
            :label="item.categoryName"
            :value="item.id">
          </el-option>
        </el-select>
        <div class="message-box">
          <h3 class="description-title">排序优先级</h3>
          <span :class="showSortTip? 'sort-tip showTip': 'sort-tip'">请输入1~99的整数，数字越小，优先级越高</span>
        </div>
        <el-input
          v-model="form.sort"
          class="input-sort"
          size="small"
          maxlength="2"
          @focus="focusInputSort"
          @blur="blurInputSort"></el-input>
        <div class="message-box">
          <h3 class="description-title">分类简介</h3>
          <span :class="showDescriptionTip? 'description-tip showTip': 'description-tip'">长度不超过60个字符</span>
        </div>
        <el-input
          type="textarea"
          v-model="form.desc"
          :rows="3"
          class="input-description"
          maxlength="60"
          @focus="focusInputDescription"
          @blur="blurInputDescription"
        ></el-input>
      </el-form>
    </div>
  </vue-modal>
</template>

<script>
  import VueModal from 'components/common/modal/VueModal';

  import {getAllCategory} from "../../../network/viewsRequest/category";
  import {insertTag, updateTag} from "../../../network/viewsRequest/tag";

  export default {
    name: "SaveTagTemplate",
    data() {
      return {
        form: {
          id: 0,
          name: '',
          categoryId: '', // 所属分类
          sort: '',
          desc: '',
        },
        categoryData: [], // 所有启用的分类信息
        showNameTip: false,
        showSortTip: false,
        showDescriptionTip: false,
      }
    },
    props: {
      tagFromParent: {
        type: Object,
        default: {}
      }
    },
    watch: {
      tagFromParent: {
        deep: true,
        handler(val) {
          this.form.id = val.id;
          this.form.name = this.$set(this.form, 'name', val.tagName);
          this.form.categoryId = this.$set(this.form, 'categoryId', val.cid);
          this.form.sort = this.$set(this.form, 'sort', val.sort);
          this.form.desc = this.$set(this.form, 'desc', val.description);
        }
      }
    },
    methods: {
      show() {
        this.form = {};
        this.$refs.saveTagModal.show('saveTagModal');
      },
      /**
       * 当分类名称对应的输入框获得焦点时，显示相应的提示信息
       */
      focusInputName() {
        this.showNameTip = true;
      },
      /**
       * 当分类名称对应的失去框获得焦点时，隐藏相应的提示信息
       */
      blurInputName() {
        this.showNameTip = false;
      },
      /**
       * 当分类排序对应的输入框获得焦点时，显示相应的提示信息
       */
      focusInputSort() {
        this.showSortTip = true;
      },
      /**
       * 当分类排序对应的失去框获得焦点时，隐藏相应的提示信息
       */
      blurInputSort() {
        this.showSortTip = false;
      },
      /**
       * 当分类描述对应的输入框获得焦点时，显示相应的提示信息
       */
      focusInputDescription() {
        this.showDescriptionTip = true;
      },
      /**
       * 当分类描述对应的输入框失去焦点时，隐藏相应的提示信息
       */
      blurInputDescription() {
        this.showDescriptionTip = false;
      },
      /**
       * 当用户点击模态框上的确认按钮时，这个方法会被调用
       */
      saveTag() {
        // 1.校验信息
        if (this.form.name == null || this.form.name.trim().length == 0) {
          this.message({
            type: 'error',
            message: '标签名称不能为空'
          });
          return;
        }
        if (this.form.categoryId == null) {
          this.message({
            type: 'error',
            message: '请选择标签所属分类'
          });
          return;
        }

        // 2.选择方法
        let func = null;
        if (this.form.id == 0 || this.form.id == undefined) {
          func = insertTag;
        } else {
          func = updateTag;
        }

        // 3.进行保存
        this.$confirm('是否要保存？', '提示', {
          cancelButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          func(this.form).then(res => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '保存成功！'
              });
              // 关闭模态框
              this.$refs.saveTagModal.closeModal('saveTagModal');
              // 调用父组件的方法来刷新表格数据
              this.$emit("reloadTable");
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '保存操作已经被取消'
          })
        })
      },
      /**
       * 获取所有分类的信息
       */
      getAllCategory() {
        getAllCategory().then(res => {
          if (res.code == 1) {
            this.categoryData = res.data;
          } else {
            this.categoryData = [];
          }
        })
      }
    },
    mounted() {
      // 取分类数据
      this.getAllCategory();
    },
    components: {
      VueModal
    }
  }
</script>

<style scoped>
  .form-box {
    padding-left: 100px;
    position: relative;
  }
  .form-box p {
    position: absolute;
    color: #F56C6C;
  }
  .name-star {
    top: 0px;
    left: 178px;
  }
  .category-star {
    top: 90px;
    left: 178px;
  }
  .input-name,.input-description,.input-sort {
    width: 500px;
  }
  h3 {
    display: inline-block;
    margin-bottom: 10px;
  }
  .description-title,.category-title {
    margin-top: 25px;
  }
  .name-tip,.description-tip,.sort-tip,.category-tip {
    margin-left: 20px;
    color: #F56C6C;
    visibility: hidden;
  }
  .message-box .showTip {
    visibility: visible;
  }

  .input-description {
    margin-bottom: 10px;
  }
</style>
